<template>
    <el-dialog custom-class="c-modal" :title="title" :width="width" :close-on-click-modal="false" :visible.sync="showModal" :show-close="closable" :fullscreen="fullscreen" append-to-body>
        <slot name="default"></slot>
        <div slot="footer" style="text-align:center;">
            <slot name="footer" />
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'commomModal',
    props: {
        width: {
            type: String,
            default() {
                return '660px'
            },
        },
        title: {
            type: String,
            default() {
                return ''
            },
        },
        loading: {
            type: Boolean,
            default() {
                return false
            },
        },
        closable: {
            type: Boolean,
            default: true,
        },
        fullscreen: Boolean,
    },
    data() {
        return {
            showModal: false,
        }
    },
    methods: {
        hide() {
            this.showModal = false
        },
        show() {
            this.showModal = true
        },
    },
}
</script>

<style lang="scss">
.c-modal {

}
</style>
